<template el-image="">
    <el-form :model="form" label-width="200px">
      <el-form-item label="货品类别" class="a" >
        <el-input v-model="form.gcategory" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="货品编码" class="a">
        <el-input v-model="form.s_gid" placeholder="请输入" disabled="true"/>
      </el-form-item>
      <el-form-item label="货品名称" class="a">
        <el-input v-model="form.gname" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="规格型号" class="a">
        <el-input v-model="form.gmodel" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="货品图片" class="a">
        <el-input v-model="form.gthumb" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="货品单价" class="a">
        <el-input v-model="form.gprice" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="所需仓库:" class="a">
       
    <div>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-checkbox   v-model="form.s_wid" value="1" label="仓库1"  size="large" class="check" />
    <el-checkbox  v-model="form.s_wid" value="2" label="仓库2" size="large" class="check"/>
    <el-checkbox  v-model="form.s_wid" value="3" label="仓库3" size="large" class="check"/>
    <el-checkbox  v-model="form.s_wid"  value="4" label="仓库4" size="large" class="check"/>
    <el-checkbox  v-model="form.s_wid" value="5" label="仓库5" size="large" class="check"/>
    <!-- <el-checkbox label="全选" size="large" id="checks" @click="quanxuan"/> -->
  </div>
      </el-form-item>
      <el-form-item label="最低库存" class="a" @input="countdupper">
        <el-input v-model="form.dlower" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="最高库存" class="a" >
        <el-input v-model="form.dupper" placeholder="请输入" disabled="true" />
      </el-form-item>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-form-item>
        
        <el-button type="primary" @click="onSubmit">申请添加</el-button>
        <el-button @click="onReset">重置表单</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script  setup>
  import { reactive } from 'vue'
  import axios from 'axios';
  
  // do not use same name with ref
  const form = reactive({
    gcategory:'',
    s_gid:'',
    gname:'',
    gmodel:'',
    gthumb:'',
    gprice:'',
    s_wid:[],
    dlower:'',
    dupper:'',
  })
const countdupper=()=>{
  form.dupper=form.dlower*5
}

axios({
              method: 'post',
              url: 'http://localhost:8080/api/addGoodsGidServlet',
              
          }).then(function (resp) {
              console.log("gid====="+resp.data.data)
              form.s_gid=resp.data.data

          });

 // 重置
 const onReset = () => {
            /* formRef.value.resetFields(); */
            location.reload()
        };

  console.log(form)
  const onSubmit = () => {
    axios({
              method: 'post',
              url: 'http://localhost:8080/api/addGoodsServlet',
              data: form
          }).then(function (resp) {
              console.log(resp.data.message)


          });
  }
  
  </script>

<style>
.a{
    height: 60px;
    width: 40%;
    align-items: center;
}

</style>